<template>
	<view>
		<view class="title-1">
			<view class="search">
				<view class="input">
					<input type="text" placeholder="搜一搜" confirm-type="search" @confirm="search"
						v-model="searchContent" />
					<i class="iconfont" style="margin-left: 60rpx;" @click="search">&#xe60a</i>
				</view>
			</view>

			<view class="content" v-if="orderList.length>0">
				<view class="orderList" v-for="(item,index) in orderList" :key="index" @click="chooseItem(item,index)"
					:class="item.selected?'selected-activity':''">
					<view class="selected-img" v-if="item.selected">
						<image src="https://pw.qyang.cc/static/svg/paySuccess.svg" mode="aspectFill"></image>
					</view>
					<view class="con2">
						<view class="l1">
							<image style="width: 26px;height: 26px;border-radius:50%;margin: 0 20rpx;"
								:src="rq.imgUrl(item.daren_avatar)" mode=""></image>
							{{item.name}}
							<image v-if="item.daren_is_real===1" src="https://pw.qyang.cc/static/svg/icon-realname.svg"
								style="width: 30rpx;height: 30rpx;margin: 0 20rpx;">
							</image>
							<view class="l1-sex1" v-if="item.daren_gender == 1">
								<image src="https://pw.qyang.cc/static/sexW.png"
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
								</image>{{item.daren_age}}
							</view>
							<view class="l1-sex2" v-if="item.daren_gender == 0">
								<image src="https://pw.qyang.cc/static/sexM.png"
									style="width: 20rpx;height: 20rpx; margin-right: 10rpx;">
								</image>{{item.daren_age}}
							</view>
						</view>
					</view>
					<view class="status">
						<view class="status status3" v-if="item.status===3">
							已接单
						</view>
						<view class="status status3" v-if="item.status===4">
							已出发
						</view>
						<view class="status status3" v-if="item.status===5">
							已到达
						</view>
						<view class="status status4" v-if="item.status===6">
							服务中
						</view>
						<view class="status status4" v-if="item.status===10">
							追加服务
						</view>
						<view class="status status5" v-if="item.status===100">
							已完成
						</view>
					</view>
					<view class="con1">
						<view class="con1-item">
							<image src="https://pw.qyang.cc/static/svg/order-icon-0.svg" mode=""></image>{{item.title}}
						</view>
						<view class="con1-item">
							<image src="https://pw.qyang.cc/static/svg/biao.svg" mode=""></image>{{item.time_text}}
						</view>
						<view class="con1-item">
							<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode=""></image>{{item.address}}
						</view>
					</view>
					<view class="con3">
						{{item.total_price}}元 <span class="con3-text">(服务费: <span class="money">{{item.price}}元 </span>
							路费:<span class="money">{{item.address_price}}元
							</span>)</span>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="submitAndReturn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				isSelected: 0,
				isShow: true,
				selectedServiceList: [],
				params: {
					page: 1,
					status: [3, 4, 5, 6, 10, 100],
					text: ''
				},
				total: 0,
				searchContent:''
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.orderList.length < this.total) {
				this.params.page++
				this.getList(true)
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			uni.hideNavigationBarLoading();		
			this.getList()
		},
		methods: {
			getList(more) {
				this.rq.getData('order/getOrderList', this.params).then(res => {
					if (res.code === 1) {
						this.total = res.data.total
						if (more) {
							this.orderList = [...this.orderList, ...res.data.data]
						} else {
							this.orderList = res.data.data
						}
					}
					uni.stopPullDownRefresh()
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			search(){
				this.params.text = this.searchContent
				this.params.page = 1
				this.getList()
			},
			submitAndReturn() {
				let ids = []
				if(this.selectedServiceList.length>0){
					ids = this.selectedServiceList.map(i=>{
						return i.id
					})
				}				
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];

				uni.navigateBack({
					success: () => {
						prevPage.$vm.receiveOrder(ids);
					}
				});
			},
			chooseItem(item,i) {
				const index = this.selectedServiceList.findIndex(selected => selected.id === item.id);
				if (index > -1) {
					// 如果已存在，从selectedServiceList数组中移除该项
					item.selected = false;
					this.$set(this.orderList,i,item)
					this.selectedServiceList.splice(index, 1);
				} else {
					// 如果不存在，添加到selectedServiceList数组，并设置为选中状态
					item.selected = true;
					this.$set(this.orderList,i,item)
					this.selectedServiceList.push(item);
				}
				console.log(this.selectedServiceList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-1 {
		background-color: #ffffff;
	}
	.content {
		padding: 20rpx 30rpx 100rpx 30rpx;
		position: relative;
		background-color: #F4F4F4;

		.orderList {
			margin-bottom: 30rpx;
			border-radius: 10px;
			background-color: #ffffff;
			width: 100%;
			// height: 686rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: relative;

			.con3 {
				padding: 20rpx auto;

				/* 900元 */
				font-family: 阿里巴巴普惠体 2.0;
				font-weight: 500;
				font-size: 14px;

				color: #FF5866;
				margin: 20rpx 40rpx;

				.con3-text {
					font-size: 12px;
					font-weight: normal;
					line-height: 14px;
					letter-spacing: 0px;

					color: #999999;

					.money {
						color: #333333
					}
				}
			}

			.con1 {
				width: 315px;
				height: 42.62%;
				border-radius: 8px;
				opacity: 1;

				background: #FFF6F9;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;

				color: #333333;
				padding: 20rpx;
				margin: 0 auto;

				image {
					width: 12px;
					height: 12px;
					margin-right: 20rpx;
				}

				.con1-item {
					height: 40rpx;
					display: flex;
					align-items: center;
				}
			}

			.con2 {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				.l1 {
					width: 100%;
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 16px;
					font-weight: 500;
					line-height: 17px;
					letter-spacing: 0px;

					color: #000000;
					display: flex;
					align-items: center;
					position: relative;

					.l1-sex1 {
						display: flex;
						width: 42px;
						height: 16px;
						border-radius: 88px;
						opacity: 1;
						background: rgba(116, 220, 254, 0.2);

						font-size: 11px;
						font-weight: 500;
						line-height: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
						letter-spacing: 0px;
						color: #2BC1F1;

					}

					.l1-sex2 {
						display: flex;
						width: 42px;
						height: 16px;
						border-radius: 88px;
						opacity: 1;

						background: rgba(253, 168, 175, 0.2);

						font-size: 11px;
						font-weight: 500;
						line-height: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
						letter-spacing: 0px;
						color: #FDA8AF;

					}
				}
			}

			.status {
				position: absolute;
				right: 0;
				width: 54.64px;
				height: 24.72px;
				border-radius: 0px 8px 0px 8px;
				opacity: 1;

				font-size: 13px;
				font-weight: 500;
				line-height: 12px;
				text-align: center;
				letter-spacing: 0px;
				background: #FF7681;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				&.status3 {
					background: #75D4F9;
				}

				&.status4 {
					background: #9C9CFE;
				}

				&.status5 {
					background: #FF7681;
				}
			}
		}
	}

	.search {
		width: 92%;
		height: 35px;
		border-radius: 99px;
		opacity: 1;

		background: #FCF9F9;

		box-sizing: border-box;
		border: 1px solid #333333;
		margin: 0 auto 20rpx;
		display: flex;
		align-items: center;

		.input {
			display: flex;
			align-items: center;
			// justify-content: center;
			width: 100%;

			input {
				padding-left: 30rpx;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 13px;
				letter-spacing: 0px;
				color: #999999;
				width: 80%;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: normal;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			letter-spacing: 20rpx;
		}
	}
	
	.selected-activity {
		position: relative;
		
		&::after {
			position: absolute;
			content: '';
			background: rgba(51, 51, 51, 0.5) !important;
			box-sizing: border-box;
			border: 2px solid #FF5866;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border-radius: 10px;
		}
	}
	
	.selected-img {
	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	
		image {
			width: 25px;
			height: 25px;
			background-image: linear-gradient(#fff, #fff);
			background-size: 15px 15px;
			background-repeat: no-repeat;
			background-position: center;
		}
	}
</style>